<!-- html -->
<template>
    <h1 class="h1">插槽</h1>
    <span class="span1" @click="slotTest1">默认插槽</span>
    <span class="span1" @click="slotTest2">具名插槽</span>
    <span class="span1" @click="slotTest3">作用域插槽</span>
    <hr>
    <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    name: 'slotHome'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { useRouter } from 'vue-router'
//数据
let router = useRouter()
//方法
function slotTest1() {
    router.push({
        path: '/slotHome/slotTest1'
    })
}
function slotTest2() {
    router.push({
        path: '/slotHome/slotTest2'
    })
}
function slotTest3() {
    router.push({
        path: '/slotHome/slotTest3'
    })
}
</script>

<!-- 样式 -->
<style scoped></style>